<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>form</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="root">
    <div>
      <input type="text" v-model="textValue"> {{textValue}}
    </div>
    <div>
      <input type="checkbox" v-model="checkboxValue"> {{checkboxValue}}
    </div>
    <div>
      <input type="checkbox" value="电影" v-model="checkboxValues">
      <input type="checkbox" value="游泳" v-model="checkboxValues">
      <input type="checkbox" value="编程" v-model="checkboxValues">
      {{checkboxValues}}
    </div>
    <div>
      <input type="radio" value="男" v-model="radioValue">
      <input type="radio" value="女" v-model="radioValue">
      {{radioValue}}
    </div>
    <div>
      <input 
        type="text" 
        :value="textValue2"
        @input="handleInput"
      >{{textValue2}}
    </div>
    <div>
      <textarea name="" id="" cols="30" rows="10" v-model="textAreaValue"></textarea>
    </div>
    <div>
      <select v-model="selectValue" multiple>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
      </select>
      {{selectValue}}
    </div>
    <div>
      <input type="text" v-model.trim.lazy="textValue">
      {{textValue}}
    </div>
    <div>
      <button @click="handleSubmit">click</button>
    </div>
  </div>
  <script>
    Vue.config.productionTip = false
    var vm = new Vue({
      el: '#root',
      data: {
        textValue: 100,
        textValue2: 'world',
        textAreaValue: 'line',
        selectValue: ['北京'],
        checkboxValue: true,
        checkboxValues: [],
        radioValue: '男'
      },
      mounted() {
        console.log(this.textValue)
      },
      methods: {
        handleInput(e) {
          this.textValue2 = e.target.value.toUpperCase()
        },
        handleSubmit() {
          console.log(this.textValue)
        }
      },
    })
  </script>
</body>
</html>